<!-- --------算力订单--------- -->
<template>
	<view class="root">
		<view class="fd-row lh-80 bgc-fff">
			<label
				class="tab f1 jc-center color-1a1a1a fs-30"
				v-for="(tab, index) in tabs"
				:key="index"
				:class="{ active: tabIndex === index }"
				@click="switchTab(index)"
			>
				{{ tab }}
			</label>
		</view>
		<scroll-view scroll-y class="f1 oh">
			<label class="height-30" />
			<block v-for="(item, index) in miners" :key="index">
				<navigator
					:url="`/pages/mine/slddxq?id=${item.id}`"
					:style="{ margin: `0 30rpx`, padding: `30rpx 20rpx` }"
					class="bgc-fff br-10 fd-row ai-center"
				>
					<view class="f1">
						<text class="color-1a1a1a fs-32">
							{{ item.project }}
						</text>
						<text class="color-666 fs-24 mt-30">
							{{ formatDate(item.addtime * 1000, "Y.M.D") }}
						</text>
					</view>

					<text class="color-ff3608 fs-32 fw-500"> {{ item.sumprice }} USDT </text>
				</navigator>
				<label class="height-20" />
			</block>
			<uni-load-more :status="loadStatus" />
		</scroll-view>
	</view>
</template>
<script>
	import { formatDate } from "@/static/utils";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more";

	export default {
		components: { uniLoadMore },
		data() {
			return {
				tabs: ["USDT", "ETH", "BTC", "FIL"],
				tabIndex: -1,
				loadStatus: "loading",
				miners: [],
			};
		},
		onLoad() {
			this.switchTab(0);
		},
		methods: {
			formatDate,
			switchTab(index) {
				this.tabIndex = index;

				this.loadStatus = "loading";
				this.$request
					.get("/Home/Info/mykuangche", {
						huobi: this.tabs[this.tabIndex].toLocaleLowerCase(),
					})
					.then(({ data }) => {
						this.miners = data.data;
					})
					.finally(() => (this.loadStatus = "noMore"));
			},
		},
	};
</script>

<style lang="scss">
	@import "@/static/reset";

	.tab {
		position: relative;
		&.active {
			color: #2a62ff;
			&::after {
				content: "";
				position: absolute;
				bottom: 10rpx;
				width: 50rpx;
				height: 4rpx;
				font-weight: 500;
				background-color: #2a62ff;

				border-radius: 2rpx;
			}
		}
	}
</style>
